<template>
  <view class="filter-container">
    <view class="date-box flex flex-a">
      <text class="label">日期</text>
      <uni-datetime-picker
        :border="true"
        v-model="timeRange"
        type="daterange"
      />
    </view>
    <view
      class="mid-box flex flex-a"
      v-if="props.compList.includes('school&Grade')"
    >
      <uni-data-select
        style="margin-right: 16rpx"
        v-model="school"
        :localdata="localData"
        placeholder="选择分校"
      ></uni-data-select>
      <uni-data-select
        v-model="grade"
        :localdata="localData"
        placeholder="选择年级"
      ></uni-data-select>
    </view>
    <view
      class="mid-box flex flex-a"
      v-if="props.compList.includes('school&teacger')"
    >
      <uni-easyinput
        style="margin-right: 16rpx"
        v-model="school_data"
        placeholder="学校搜索内容"
      ></uni-easyinput>
      <uni-easyinput
        style="margin-right: 16rpx"
        v-model="teacher_data"
        placeholder="教师搜索内容"
      ></uni-easyinput>
      <view class="">
        <van-button
          color="#A6A6A6"
          style="color: rgba(51, 51, 51, 1); font-size: 24rpx; width: 116rpx"
          size="small"
          @click="search"
          >搜索</van-button
        >
      </view>
    </view>
    <view class="input-box flex flex-a flex-sa">
      <uni-data-select
        style="margin-right: 16rpx"
        v-if="props.compList.includes('type')"
        v-model="type"
        :localdata="localData"
        placeholder="选择类型"
      ></uni-data-select>
      <uni-easyinput
        placeholder="请输入关键词"
        style="margin-right: 16rpx"
        :inputBorder="true"
        v-if="!props.compList.includes('school&teacger')"
        v-model="keyword"
      ></uni-easyinput>
      <view class="" v-if="!props.compList.includes('school&teacger')">
        <van-button
          color="#A6A6A6"
          style="color: rgba(51, 51, 51, 1); font-size: 24rpx; width: 116rpx"
          size="small"
          @click="search"
          >搜索</van-button
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
const emits = defineEmits(["startSearch"])
import { getCurrentDate } from "@/utils"
const props = defineProps({
  compList: {
    type: Array,
    // 'date', 'keyword', 'school&Grade' 'type'
    default: () => ["date", "keyword", "school&Grade", "type"]
  }
})
const localData = []
const timeRange = ref([getCurrentDate(), getCurrentDate()])
const type = ref("")
const keyword = ref("")
const school = ref("")
const grade = ref("")
const school_data = ref("")
const teacher_data = ref("")

const search = () => {
  const params = {
    dateRange: timeRange.value,
    type: type.value,
    keyword: keyword.value,
    type: type.value,
    school: school.value,
    grade: grade.value,
    school_data: school_data.value,
    teacher_data: teacher_data.value
  }

  emits("startSearch", params)
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding: 12rpx 52rpx 30rpx 64rpx;
}
.date-box {
  .label {
    margin-right: 10rpx;
  }
}
.input-box {
  margin-top: 20rpx;
}
.mid-box {
  margin-top: 20rpx;
}
</style>
